<template>
    <div>
        <div :style="{width: width + 'px'}" style="margin-bottom: 30px;"><custom-title :title="title" /></div>
        <div class="rank-box" :style="{width: width + 'px',height: height+'px'}">
            <div class="rank-list-li" v-for="(item, index) in dataList" :key="index">
                <div class="rank-li-top">
                    <div class="rank-top-left">
                        <b :class="rankClass(index)">{{
                            index + 1 }}</b><span>{{ item.prop }}</span>
                    </div>
                    <div class="rank-top-right">
                        <b>{{ item.value }}</b><span>次</span>
                    </div>
                </div>
                <div class="rank-li-bottom">
                    <div v-if="dialogVisible === '1'" class="rank-bottom-setp" :style="computedStyle(item.value)"></div>
                    <div v-else class="rank-bottom-meet" :style="getMeetWidthStyles(item, index)"></div>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script>

export default {
    name: 'rank',
    props: {
        width: {
            type: Number,
            default: 400
        },
        height: {
            type: Number,
            default: 400
        },
        title: {
            type: String,
            default: '预警分析'
        },
        //是要排名还是长度拼接展示
        dialogVisible: {
            type: String,
            default: '1',
        },
        //最大值是多少，按照最大值计算百分比
        max: {
            type: Number,
            default: 100,
        },
        //数据格式
        dataList: {
            type: Array,
            required: true,
            default: [
                { value: 50, prop: '位置1' },
                { value: 60, prop: '位置1' },
                { value: 70, prop: '位置1' },
                { value: 80, prop: '位置1' },
                { value: 100, prop: '位置1' },
                { value: 60, prop: '位置1' },
                { value: 50, prop: '位置1' },
                { value: 10, prop: '位置1' },
                { value: 20, prop: '位置1' },
                { value: 30, prop: '位置1' },
            ],
        },
    },
    components: {},
    computed: {
        totalValue() {
            return this.dataList.reduce((acc, curr) => acc + curr.value, 0);
        },
    },
    created() {
    },
    data() {
        return {
        }
    },
    methods: {
        //计算背景颜色
        rankClass(index) {
            // 确保index是一个数字，且在正确的范围内
            if (typeof index !== 'number' || index < 0 || index > 2) {
                return ''; // 或者返回一个默认的类名
            }
            switch (index) {
                case 0:
                    return 'rankBgcOne';
                case 1:
                    return 'rankBgcTwo';
                case 2:
                    return 'rankBgcThree';
                default:
                    return 'rankBgcNone'; // 提供一个默认值，以防index的值不在预期范围内
            }
        },
        //计算宽度
        computedStyle(value) {
            if (typeof value !== 'number' || value < 0) {
                return { width: '0' };
            }
            const safeValue = Math.min(value, Number.MAX_SAFE_INTEGER);

            const width = (safeValue / this.max) * 100 + '%';

            return { width };
        },
        // 图表点击
        onBarClicked(params) {
            console.log(params);
            // 在这里处理点击事件，例如弹出模态框显示更多数据
        },
        // 计算累积值
        getAccumulatedValue(index) {
            return this.dataList.slice(0, index).reduce((acc, curr) => acc + curr.value, 0);
        },
        //计算需要拼接起来的进度条背景颜色
        getMeetWidthStyles(item, index) {
            const accumulatedValue = this.getAccumulatedValue(index);
            const leftOffset = accumulatedValue / this.totalValue * 100;
            const width = item.value / this.totalValue * 100;
            return {
                'margin-left': `${leftOffset}%`,
                width: `${width}%`
            };
        },
    },
}
</script>
<style lang="less" scoped>
.rank-box {
    .rank-li-top {
        display: flex;
        justify-content: space-between;

        .rank-top-left {
            b {
                display: inline-block;
                text-align: center;
                width: 24px;
                height: 18px;
                font-size: 12px;
                font-family: Oswald, Oswald;
                font-weight: 500;
                color: #FFFFFF;
                line-height: 17px;
            }

            span {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 14px;
                color: #D0DEEE;
                line-height: 20px;
                margin-left: 8px;
            }
        }

        .rankBgcOne {
            background: linear-gradient(180deg, #FFD03B 0%, rgba(255, 208, 59, 0.09) 100%);
        }

        .rankBgcTwo {
            background: linear-gradient(180deg, #D9E7FF 0%, rgba(217, 231, 255, 0.2) 100%);
        }

        .rankBgcThree {
            background: linear-gradient(180deg, #FF6A3A 0%, rgba(255, 106, 58, 0.2) 100%);
        }

        .rankBgcNone {
            background: linear-gradient(180deg, #6A707C 0%, rgba(106, 112, 124, 0.2) 100%);
        }

        .rank-top-right {
            b {
                display: inline-block;
                font-family: Oswald, Oswald;
                font-weight: 400;
                font-size: 16px;
                color: #D0DEEE;
                line-height: 22px;
                margin-right: 3px;
            }

            span {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 12px;
                color: #6C8097;
                line-height: 17px;
            }
        }
    }

    .rank-li-bottom {
        width: 100%;
        height: 4px;
        background: rgba(108, 128, 151, 0.2);
        margin-top: 3px;
        margin-bottom: 6px;

        .rank-bottom-setp {
            height: 100%;
            background: linear-gradient(270deg, #00EFFF 0%, #00527D 100%);
        }
    }

    .rank-bottom-meet {
        height: 100%;
        background: linear-gradient(270deg, #00EFFF 0%, #00527D 100%);
    }
}
</style>